<template>
	<view class="wrap">
		<view class="logo">百米</view>
		<input type="text" value="" placeholder="请输入用户名"  v-model="username"/>
		<input type="text" value="" placeholder="请输入密码" v-model="password"/>
		<view class="news">
			<checkbox-group name="" @change="handleChange">
				<label>
					<checkbox value="1" /><text>用户协议</text>
				</label>
			</checkbox-group>
		</view>
		<view class="loginBtn" @click="handleLogin">登录</view>
		<view class="loginTxt">还没有账号吗？<navigator url="/pages/sign/sign">去注册</navigator></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedState:[],
				userList:[],
				username:"",
				password:""
			}
		},
		onShow() {
			if(uni.getStorageSync("userList")){
				this.userList = uni.getStorageSync("userList")
			}else{
				this.userList = []
			}
		},
		methods: {
			handleChange(e){
				this.checkedState =e.detail.value
			},
			handleLogin(){
				if(this.checkedState.length){
					let state = false
					let index = 0
					this.userList.forEach((v,i)=>{
						if(v.username ==this.username){
							state = true
							index = i
							
						}
					})
					if(state){
						if(this.userList[index].password == this.password){
							uni.setStorageSync("loginInfo",this.userList[index].username)
							uni.showToast({
								title:"登录成功",
							})
							
							setTimeout(()=>{
								uni.switchTab({
									url:"../user/user"
								})
							},1500)
						}
					}else{
						console.log("12345")
						uni.showToast({
							title:"用户名错误",
							icon:"error"
						})
					}
				}else{
					uni.showToast({
						title:"请同意协议",
						icon:"error"
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.wrap{
		padding: 30rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.news{
			width: 80%;
			display: flex;
			justify-content: flex-start;
			text{
				color: orangered;
				text-decoration: underline;
			}
		}
		.logo{
			font-size: 80rpx;
			font-weight: bold;
			color: orangered;
			margin-top: 80rpx; 
		}
		input,.loginBtn{
			width: 600rpx;
			height: 80rpx;
			border: 2rpx solid gray;
			border-radius: 40rpx;
			margin: 20rpx 0;
		}
		input{
			padding-left: 30rpx;
		}
		.loginBtn{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: orangered;
			border: none;
			color: white;
		}
		.loginTxt{
			display: flex;
			navigator{
				color: orangered;
				text-decoration: underline;
			}
		}
	}
</style>
